<style>
  @media screen and (min-width: 1200px) {
    .twy-agot-banner-title.has-ribbon  .product-wrapper .content-des {
      top: calc(40% + 15px);
    } 
  }
  @media screen and (min-width: 1040px) and (max-height: 700px) {
    .twy-agot-banner-title.has-ribbon  .product-wrapper .content-des {
      top: calc(48% + 10px);
    }
    .twy-agot-banner-title.has-ribbon .product-wrapper .color_img {
      margin-top: 34px;
    }
  }
</style>
<div class="twy-agot-banner-title spaced-section" id="overview">
  <div class="agot-width">
    <div class="bg-container scene-container">
      <div class="text-wrap" style="width: 100%;">
        <div class="page-width">
          <div class="text-wrap__title">
            {% if section.settings.text != blank %}
              {{ section.settings.text }}
            {% endif %}
          </div>
          <div class="text-wrap__desc">
            {% if section.settings.text != blank %}
            <span class="text-wrap__desc-prefix">{{ section.settings.prefix }}</span> <span class="text-wrap__desc-content">{{ section.settings.desc }}</span>
            {% endif %}
          </div>
        </div>
      </div>
      <div class="bg-image scene-wrapper" id="bg-wrap">
        <div class="pc-banner image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
          {% if section.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}
        >
          {%- if section.settings.image != blank -%}
            <img
              srcset="{%- if section.settings.image.width >= 165 -%}{{ section.settings.image | img_url: '165x' }} 165w,{%- endif -%}
                {%- if section.settings.image.width >= 323 -%}{{ section.settings.image | img_url: '323x' }} 323w,{%- endif -%}
                {%- if section.settings.image.width >= 360 -%}{{ section.settings.image | img_url: '360x' }} 360w,{%- endif -%}
                {%- if section.settings.image.width >= 535 -%}{{ section.settings.image | img_url: '535x' }} 535w,{%- endif -%}
                {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
                {%- if section.settings.image.width >= 1070 -%}{{ section.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
                {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
                {{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w"
              src="{{ section.settings.image | img_url: '1500x' }}"
              sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 1 }}px, (min-width: 750px) calc((100vw - 130px) / 1), calc((100vw - 50px) / 1)"
              alt="{{ section.settings.image.alt | escape }}"
              loading="lazy"
              width="{{ section.settings.image.width }}"
              height="{{ section.settings.image.height }}"
            >
          {%- else -%}
            {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
          {%- endif -%}
        </div>
        <div class="mb-banner twy-agot-banner-title__image-mobile image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image_mobile != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
          {% if section.settings.image_mobile != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image_mobile.aspect_ratio | times: 100 }}%;"{% endif %}
        >
          {%- if section.settings.image_mobile != blank -%}
            <img
              srcset="{%- if section.settings.image_mobile.width >= 165 -%}{{ section.settings.image_mobile | img_url: '165x' }} 165w,{%- endif -%}
                {%- if section.settings.image_mobile.width >= 323 -%}{{ section.settings.image_mobile | img_url: '323x' }} 323w,{%- endif -%}
                {%- if section.settings.image_mobile.width >= 360 -%}{{ section.settings.image_mobile | img_url: '360x' }} 360w,{%- endif -%}
                {%- if section.settings.image_mobile.width >= 535 -%}{{ section.settings.image_mobile | img_url: '535x' }} 535w,{%- endif -%}
                {%- if section.settings.image_mobile.width >= 750 -%}{{ section.settings.image_mobile | img_url: '750x' }} 750w,{%- endif -%}
                {%- if section.settings.image_mobile.width >= 1070 -%}{{ section.settings.image_mobile | img_url: '1070x' }} 1070w,{%- endif -%}
                {%- if section.settings.image_mobile.width >= 1500 -%}{{ section.settings.image_mobile | img_url: '1500x' }} 1500w,{%- endif -%}
                {{ section.settings.image_mobile | img_url: 'master' }} {{ section.settings.image_mobile.width }}w"
              src="{{ section.settings.image_mobile | img_url: '1500x' }}"
              sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 1 }}px, (min-width: 750px) calc((100vw - 130px) / 1), calc((100vw - 50px) / 1)"
              alt="{{ section.settings.image_mobile.alt | escape }}"
              loading="lazy"
              width="{{ section.settings.image_mobile.width }}"
              height="{{ section.settings.image_mobile.height }}"
            >
          {%- else -%}
            {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
          {%- endif -%}
        </div>
      </div>
      <div class="product-wrapper" data-alt id="product_color">
        <div class="product-wrapper__heading">
          <div class="product-wrapper__heading-mobile-icon">
            {{ section.settings.mobile_icon }}
          </div>
          <div class="product-wrapper__heading-mobile-text">
            {{ section.settings.mobile_heading }}
          </div>
        </div>
        <ul class="product_color-img page-width">
          {%- for block in section.blocks -%}
            {% case block.type %}
              {%- when 'image' -%}
              <li data-alt="{{ block.settings.image.alt | escape }}" class="prodcut-list-item {% if forloop.index0 == 0 %}  li-first {% endif %} product-bg {{ block.settings.image.alt | escape }}" {{ block.shopify_attributes }}>
                <div class="pc-banner media transparent"  style="padding-bottom: {{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%;">
                  {%- if block.settings.image != blank -%}
                    <img
                      srcset="{%- if block.settings.image.width >= 165 -%}{{ block.settings.image | img_url: '165x' }} 165w,{%- endif -%}
                        {%- if block.settings.image.width >= 323 -%}{{ block.settings.image | img_url: '323x' }} 323w,{%- endif -%}
                        {%- if block.settings.image.width >= 360 -%}{{ block.settings.image | img_url: '360x' }} 360w,{%- endif -%}
                        {%- if block.settings.image.width >= 535 -%}{{ block.settings.image | img_url: '535x' }} 535w,{%- endif -%}
                        {%- if block.settings.image.width >= 750 -%}{{ block.settings.image | img_url: '750x' }} 750w,{%- endif -%}
                        {%- if block.settings.image.width >= 1070 -%}{{ block.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
                        {%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
                        {{ block.settings.image | img_url: 'master' }} {{ block.settings.image.width }}w"
                      data-src="{{ block.settings.image | img_url: '1500x' }}"
                      sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
                      alt="{{ block.settings.image.alt | escape }}"
                      loading="lazy"
                      class="lazyload"
                      width="{{ block.settings.image.width }}"
                      height="{{ block.settings.image.height }}"
                    >
                  {%- else -%}
                    {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                  {%- endif -%}
                </div>
                <div class="media transparent"  style="padding-bottom: {{ 1 | divided_by: block.settings.image_mobile.aspect_ratio | times: 100 }}%;">
                  {%- if block.settings.image_mobile != blank -%}
                    <img
                      srcset="{%- if block.settings.image_mobile.width >= 165 -%}{{ block.settings.image_mobile | img_url: '165x' }} 165w,{%- endif -%}
                        {%- if block.settings.image_mobile.width >= 323 -%}{{ block.settings.image_mobile | img_url: '323x' }} 323w,{%- endif -%}
                        {%- if block.settings.image_mobile.width >= 360 -%}{{ block.settings.image_mobile | img_url: '360x' }} 360w,{%- endif -%}
                        {%- if block.settings.image_mobile.width >= 535 -%}{{ block.settings.image_mobile | img_url: '535x' }} 535w,{%- endif -%}
                        {%- if block.settings.image_mobile.width >= 750 -%}{{ block.settings.image_mobile | img_url: '750x' }} 750w,{%- endif -%}
                        {%- if block.settings.image_mobile.width >= 1070 -%}{{ block.settings.image_mobile | img_url: '1070x' }} 1070w,{%- endif -%}
                        {%- if block.settings.image_mobile.width >= 1500 -%}{{ block.settings.image_mobile | img_url: '1500x' }} 1500w,{%- endif -%}
                        {{ block.settings.image_mobile | img_url: 'master' }} {{ block.settings.image_mobile.width }}w"
                      data-src="{{ block.settings.image_mobile | img_url: '1500x' }}"
                      sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
                      alt="{{ block.settings.image_mobile.alt | escape }}"
                      loading="lazy"
                      class="lazyload"
                      width="{{ block.settings.image_mobile.width }}"
                      height="{{ block.settings.image_mobile.height }}"
                    >
                  {%- else -%}
                    {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                  {%- endif -%}
                </div>
              </li>
            {%- endcase -%}
          {%- endfor -%}
        </ul>
        <div class="content-des">
          <div class="page-width">
            <div class="left">
              <div class="botton tenways-bike-color-gray" id="twy-agot-feature_wrapper">
                <div class="name_feature">
                  <span class="name_feature_prefix">{{ section.settings.feature_name_1 }}</span>
                  <span class="name_feature_tail">
                    {{ section.settings.feature_1 }}
                  </span>
                </div>
                <div class="name_feature">
                  <span class="name_feature_prefix">{{ section.settings.feature_name_2 }}</span>
                  <span class="name_feature_tail">
                    {{ section.settings.feature_2 }}
                  </span>
                </div>
              </div>
              <div class="color_img">
                {%- for block in section.blocks -%}
                  {% case block.type %}
                    {%- when 'color' -%}
                      {%- if block.settings.color != blank -%}
                        <div class="img" {{ block.shopify_attributes }} data-alt="{{ block.settings.color.alt | escape }}">
                          <img loading="lazy" class="cs_img" src="{{ block.settings.color | img_url: '400x' }}" alt="{{ block.settings.color.alt | escape }}" width="30" height="30"/>
                        </div>
                      {%- endif -%}
                  {%- endcase -%}
                {%- endfor -%}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
 </div>
</div>

<script>
  var ribbon = $('sticky-header');
  var ribbonHeight = ribbon.height();
  window.ribbonHeight = ribbon.height();
  if (ribbonHeight > 54) {
    $(".twy-agot-banner-title").addClass('has-ribbon');
  }
</script>

<script>
  $.fn.removeClassRegex = function(regex) {
    return $(this).removeClass(function(index, classes) {
      return classes.split(/\s+/).filter(function(c) {
        return regex.test(c);
      }).join(' ');
    });
  };

  $(window).ready(function() {
    $('.product_color-img [data-alt]').hide();
    var $productColor = $('.color_img .img');
    $([$productColor]).each(function(e) {
      
      var $selectV = $(this).eq(0).addClass("active");
      var $img_attribute = $selectV.children('img').attr('alt');
      var $ProductUl = document.querySelector('.product_color-img');
      var $ProductColor = document.querySelector('.product-wrapper');
      
      $('li[data-alt="' + $img_attribute + '"]').show();
      $ProductUl.setAttribute('data-alt', $img_attribute);
      $ProductColor.setAttribute('data-alt', $img_attribute);
      
      $('#twy-agot-feature_wrapper').removeClassRegex(/tenways-bike-color/).addClass(`tenways-bike-color-${$img_attribute}`);
      
      $(this).on('click', function(e) {
        $(this).addClass('active','animate').siblings('.img').removeClass('active','animate');
        var $colorImg = $(this).children().attr('alt');
        $ProductUl.setAttribute('data-alt', $colorImg);
        $ProductColor.setAttribute('data-alt', $colorImg);
        $('#twy-agot-feature_wrapper').removeClassRegex(/tenways-bike-color/).addClass(`tenways-bike-color-${$colorImg}`);
        $('li[data-alt="' + $colorImg + '"]').show().siblings('li').hide();
      });
    });
  });
  
  $(window).ready(function() {
    var tooSmall = false;
    var controller = null;
    var maxWidth = 991;
  
    if( $(window).width() < maxWidth ) {
      tooSmall = true;
    }

    function initScrollMagic() {
      const tenwaysAgox = document.querySelector(".agot-width");
      const tenwaysAgotImage = tenwaysAgox.querySelector(".bg-container");
      const tenwaysAgotText = tenwaysAgox.querySelector(".text-wrap");
      
      const AgoxController = new ScrollMagic.Controller();
      const tl = new TimelineMax();
      
      
      const distance = 190;
      const height = $("sticky-header").height();
      const extra = (height - 54) / 2 - distance;

      tl.fromTo(
        ".text-wrap",
        1,
        { yPercent:  '50', opacity: 0, autoAlpha: 0},
        { yPercent:  '0', opacity: 1, autoAlpha: 1},
        "+=0.5"
      )
      
      tl.fromTo(
        ".text-wrap",
        1,
        { yPercent:  '0', opacity: 1},
        { y:  extra, opacity: 1 },
      );
      
      tl.fromTo(
        ".text-wrap__title",
        1,
        { color:  '#fff'},
        { color:  '#000'},
        "-=1"
      );
      
      tl.fromTo(
        ".text-wrap__desc",
        1,
        { color:  '#fff'},
        { color:  '#4D4D4D'},
        "-=1"
      );
      
      tl.fromTo(
        "#bg-wrap",
        1,
        { autoAlpha: 1},
        { autoAlpha: 0},
      );
      
      tl.fromTo(
        ".product-wrapper",
        1,
        { autoAlpha: 0},
        { autoAlpha: 1},
        "-=1"
      )
      
      tl.fromTo(
        ".product-wrapper",
        2,
        { },
        { },
      )
      
      let scene1 = new ScrollMagic.Scene({
        duration: 800,
        triggerElement: tenwaysAgotImage,
        triggerHook: 0
      })
      .setTween(tl)
      .setPin(tenwaysAgotImage)
      .addTo(AgoxController); 
    }

    if( !tooSmall ) {
      initScrollMagic();
    }

    $(window).resize( function() {
      var wWidth = $(window).width();
      if( wWidth < maxWidth ) {
        if( AgoxController !== null && AgoxController !== undefined ) {
          AgoxController = AgoxController.destroy( true );
        }
      } else if( wWidth >= maxWidth ) {
        if( AgoxController === null || AgoxController === undefined ) {
          initScrollMagic();
        }
      }
    });


  })
</script>

{% schema %}
  {
    "name": "Twy AGOT Banner Title",
    "tag": "section",
    "class": "spaced-section spaced-section--full-width tenways-video_height element_top",
    "settings": [
      {
        "type": "image_picker",
        "id": "image",
        "label": "Image"
      },
      {
        "type": "image_picker",
        "id": "image_mobile",
        "label": "Mobile image"
      },
      {
        "type": "html",
        "id": "text",
        "label": "Heading"
      }, 
      {
        "type": "text",
        "id": "prefix",
        "label": "prefix"
      },
      {
        "type": "text",
        "id": "desc",
        "label": "desc"
      },
      {
        "type": "html",
        "id": "mobile_icon",
        "label": "Mobiel Icon"
      },
      {
        "type": "html",
        "id": "mobile_heading",
        "label": "Mobiel Heading"
      },
      {
        "type": "select",
        "id": "height",
        "options": [
          {
            "value": "adapt",
            "label": "t:sections.image-with-text.settings.height.options__1.label"
          },
          {
            "value": "small",
            "label": "t:sections.image-with-text.settings.height.options__2.label"
          },
          {
            "value": "large",
            "label": "t:sections.image-with-text.settings.height.options__3.label"
          }
        ],
        "default": "adapt",
        "label": "t:sections.image-with-text.settings.height.label"
      },
      {
        "type": "text",
        "id": "feature_name_1",
        "label": "Feature name"
      },
      {
        "type": "text",
        "id": "feature_1",
        "label": "Feature 1"
      },
      {
        "type": "text",
        "id": "feature_1_unit",
        "label": "Feature 1 Unit"
      },
      {
        "type": "text",
        "id": "feature_name_2",
        "label": "Feature name"
      }, {
        "type": "text",
        "id": "feature_2",
        "label": "Feature 2"
      },
      {
        "type": "text",
        "id": "feature_2_unit",
        "label": "Feature 2 Unit"
      }
    ],
    "blocks": [
      {
        "type": "image",
        "name": "image",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "image_picker",
            "id": "image_mobile",
            "label": "Image mobile"
          }
        ]
      },
      {
        "type": "color",
        "name": "color",
        "settings": [
          {
            "type": "image_picker",
            "id": "color",
            "label": "Color"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Twy AGOT Banner Title"
      }
    ]
  }
{% endschema %}



